<template>
	<view class="card-container" :style="{'background-color': bgColor}">
		<view class="card-content">
			<!-- 标题与图片区域 -->
			<view class="title-image-wrapper">
				<!-- 1. 多图模式（mode=3）：循环渲染所有图片 -->
				<view class="multi-imgbox" v-if="mode === 3">
					<image 
						v-for="(imgage, index) in imageList" 
						:key="index" 
						:src="imgage"
						@error="handleImageException(index)" 
						style="width: 120rpx; height: 130rpx; margin-right: 8rpx;"
						mode="aspectFill" 
					></image>
				</view>

				<!-- 2. 单图模式（mode=2）：只显示第一张图 -->
				<view class="imgbox" v-else-if="mode == 2">
					<image 
						:src="showImage" 
						@error="handleImageException(0)"
						style="width: 120rpx; height: 130rpx; margin-right: 15rpx;"
						mode="aspectFill"
					></image>
				</view>

				<!-- 标题文本 -->
				<view class="title-wrapper">
					<text class="title">{{ title }}</text>
				</view>
			</view>

			<!-- 信息栏 -->
			<view class="info-bar">
				<view class="left-info">
					<text class="sticky-tag" v-if="isSticky">置顶</text>
					<text v-if="mode==3 && imageList.length>=3">广告</text>
					<text class="author" :style="authorColor">{{ author }}</text>
					<text class="comment-count" v-if="!(mode==3 && imageList.length>=3)">{{ formatNumber(number) }}评</text>
				</view>
				<text class="time">{{ time }}</text>
			</view>

			<!-- 底部插槽 -->
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CardViewText",
		data() {
			return {
				defaultPic: "/static/icon-load-default.png",
				failPic: "/static/fail-image.png",
				status: 'news'
			};
		},
		computed: {
			// 处理单图路径
			showImage() {
				// 从图片列表取第一张
				if (this.imageList.length > 0) {
					return this.imageList[0];
				}
				return this.defaultPic;
			},
			// 统一处理图片列表（兼容字符串和数组）
			imageList() {
				if (Array.isArray(this.image)) {
					return this.image;
				} else if (typeof this.image === 'string' && this.image.trim()) {
					return [this.image]; // 字符串转为数组
				}
				return []; // 空默认值
			},
			// 作者文字颜色
			authorColor() {
			  const colorMap = {
			    news: '#aaa',
			    ad: '#0000ff' 
			  };
			  if (this.mode == 3 && this.imageList.length >=3) {
			    this.status = "ad";
			  } else {
			    this.status = "news";
			  }
			  return {
			    color: colorMap[this.status] || '#f33'
			  }
			}

		},
		mounted() {
			// 多图模式下标记为广告
			if (this.mode == 3) {
				this.status = "ad";
			}
		},
		methods: {
			// 处理图片加载失败
			handleImageException(index) {
				console.log(`[图片加载失败] 标题: ${this.title}，索引: ${index}`);
				// 仅在数组模式下替换失败图片
				if (Array.isArray(this.image)) {
					this.$set(this.image, index, this.failPic);
				}
			},
			// 格式化数字（1000→1k，10000→1w）
			formatNumber(num) {
				if (num >= 10000) {
					return (num / 10000).toFixed(1) + 'w';
				} else if (num >= 1000) {
					return (num / 1000).toFixed(1) + 'k';
				}
				return num;
			}
		},
		props: {
			// 图片路径（支持字符串或数组）
			image: {
				type: [String, Array],
				default: () => []
			},
			// 卡片背景色
			bgColor: {
				type: String,
				default: '#fff'
			},
			// 标题（必填）
			title: {
				type: String,
				default: "视频画报｜携手开创亚太发展新时代",
				required: true
			},
			// 作者（必填）
			author: {
				type: String,
				default: "新华社",
				required: true
			},
			// 评论数（必填）
			number: {
				type: Number,
				default: 0,
				required: true
			},
			// 时间
			time: {
				type: String,
				default: "2025.10.29"
			},
			// 是否置顶
			isSticky: {
				type: Boolean,
				default: false,
				required: true
			},
			// 显示模式（1:无图 2:单图 3:多图）
			mode: {
				type: Number,
				default: 1,
				required: true,
				validator: (value) => [1, 2, 3].includes(value) // 限制合法值
			}
		}
	};
</script>

<style scoped>
	.card-container {
		padding: 16rpx;
		margin-bottom: 8rpx;
	}

	.card-content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.title-image-wrapper {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 15rpx; /* 统一图片与标题间距 */
	}

	.title-wrapper {
		flex: 1;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 1.5;
		color: #333;
		word-break: break-all;
	}

	.info-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		margin-top: 15rpx;
	}

	.left-info {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 15rpx; /* 用gap统一间距 */
	}

	.sticky-tag {
	  color: #ff4d4f;
	  background-color: #fff1f0;
	  padding: 2rpx 10rpx;
	  border-radius: 4rpx;
	  font-size: 24rpx;
	}
	/* 新增/修改：广告文字颜色改为黑色 */
	text[v-if="mode==3 && imageList.length>=3"] {
	  color: #333 !important;
	}

	.time {
		color: #999;
		font-size: 24rpx;
	}

	.multi-imgbox {
		display: flex;
		flex-shrink: 0;
		gap: 8rpx; /* 统一多图间距 */
	}

	/* 多图模式标题宽度限制 */
	.title-image-wrapper:has(.multi-imgbox) .title-wrapper {
		max-width: calc(100% - 260rpx);
	}
</style>
